<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{width: 60%;height: 100%;margin:0;font-family:"微软雅黑";}
        #panorama {width:100%; height: 500px;}
        #result {width:100%;font-size:12px;}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=zc8IbOv8nA8HxKHxHR1wvNw3IPAe4Lhs"></script>
    <title>添加/删除全景相册控件</title>
</head>
<body>

<div>
<div id="panorama"></div>
<div id="result">
    <div>
        <button id="hideAlbumsControl">隐藏全景相册控件</button>
        <button id="showAlbumsControl">显示全景相册控件</button>
    </div>
</div>
</div>


</body>
</html>
<script type="text/javascript">
    var panorama = new BMap.Panorama('panorama', {
        albumsControl: true //默认为不显示相册控件，默认值为false
    });

    panorama.setPosition(new BMap.Point(137.296925, 31.863743));
    panorama.setPov({pitch: 5.04, heading: 343.92});

    //设置相册位置为右上角
    panorama.setOptions({
        albumsControlOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT
        }
    });

    //设置偏移量，距离上面15px，距离左边100px（距离那边受anchor位置的影响）
    panorama.setOptions({
        albumsControlOptions: {
            offset: new BMap.Size(100, 15)
        }
    });

    //设置相册的长度和图片大小,相册的最大宽度为60%，相册内图片的大小为80px
    panorama.setOptions({
        albumsControlOptions: {
            maxWidth: '60%',
            imageHeight: 80
        }
    });

    //隐藏相册
    document.getElementById("hideAlbumsControl").onclick = function(){
        panorama.setOptions({
            albumsControl: false
        });
    };

    //显示相册
    document.getElementById("showAlbumsControl").onclick = function(){
        panorama.setOptions({
            albumsControl: true
        });
    };
</script>

